<template>
  <div class="">
    <el-button size="small" type="danger" @click="clearOverlays()"
      >重新绘制</el-button
    >
    <el-button size="small" type="primary" @click="sendLngLat">绘画完成</el-button>

    <div
      id="mapFencecontainer"
      class="mapBox"
      style="width: 100%; height: 400px;"
    >
      <div class="mapBtn"></div>
    </div>
    <!-- <p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p> -->
  </div>
</template>

<script>
let map, marker, polygon, drawingManager, lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
const markersArray = [];
let overlaysArray = []; // 标注点集合,绘制多边形时的集合
let path4 = []; // 设置回显数据参数
// 默认展示假数据回显参数
export default {
	name:"QTmap",
  props:{
    centerLng:{
      type:Number,
      default(){
        return 111.004468
      },
    },
    centerLat:{
      type:Number,
      default(){
        return 35.031641
      },
    },
   
  },
  data() {
    return {
      lngLatData: [], // 绘制多边形坐标点,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 子组件给父组件传值(确认按钮)
    sendLngLat() {
      if (lngLat == undefined) {
        lngLat = path4;
      }
      this.$emit("emitDataChange", this.lngLatData);
    },
    // 地图初始化
    init() {
		path4 = []
      this.lngLatData = this.$store.state.locationArr
       console.log('222',this.lngLatData)
      //地图配置
      map = new qq.maps.Map(document.getElementById("mapFencecontainer"), {
        center: new qq.maps.LatLng(this.centerLat, this.centerLng), // 暂时默认郑州
        zoom: 13,
      });
      this.lngLatData.forEach((item) => {
        console.log('111')
        path4.push(new qq.maps.LatLng(item.lat, item.lng));
      });
      //数据回显
      this.showpolygon(path4);
      // 绘制
      this.addpolygon();
    },
    // 删除标记
    deleteOverlays() {
      if (markersArray) {
        // for (i in markersArray) {
        for (var i = 0; i < markersArray.length; i++) {
          markersArray[i].setMap(null);
        }
        markersArray.length = 0;
      }
      if (marker !== undefined) {
        marker.setMap(null);
      }
    },
    /**
     * 多边形绘制
     */
    // 绘制
    addpolygon() {
      drawingManager = new qq.maps.drawing.DrawingManager({
        drawingMode: qq.maps.drawing.OverlayType.POLYGON, // 默认选中多边形绘制
        drawingControl: true,
        drawingControlOptions: {
          position: qq.maps.ControlPosition.TOP_CENTER,
          // 表头显示区域
          drawingModes: [qq.maps.drawing.OverlayType.POLYGON],
        },
        markerOptions: {
          visible: false,
        },
        // 多边形样式
        polygonOptions: {
          editable: true,
          strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
          fillColor: new qq.maps.Color(202, 67, 58, 0.1),
          clickable: false,
        },
      });
      let that = this;

      drawingManager.setMap(map);
      qq.maps.event.addListener(
        drawingManager,
        "overlaycomplete",
        function (event) {
          lngLat = [];
          overlaysArray.push(event.overlay);
          for (const item of event.overlay.getPath().elems) {
            const lng = item.getLng();
            const lat = item.getLat();
            lngLat.push({
              lat: lat,
              lng: lng,
            });
          }
          that.lngLatData = lngLat;
          console.log("区域地图", lngLat); // 获得相应的经纬度值
          drawingManager.setMap(null);
        }
      );
    },
    // 初始化回显
    showpolygon(path3) {
      polygon = new qq.maps.Polygon({
        map: map,
        editable: true,
        strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
        fillColor: new qq.maps.Color(202, 67, 58, 0.1),
      });
      polygon.setPath(path3);
    },
    // 删除绘制的多边形
    clearOverlays() {
      this.lngLatData = []
      this.$store.commit("setLocationArr", []);
      this.$emit("emitDataChange", []);
      path4 = [];
      polygon.setPath(path4);
      if (overlaysArray) {
        // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0
        // for (i in overlaysArray) {
        for (var i = 0; i < overlaysArray.length; i++) {
          overlaysArray[i].setMap(null);
        }
      }
      overlaysArray = []; // 需要重置为空，否则之前的数据还在这个数组里面
      lngLat = [];
      this.count = 0;
      this.init();
    },
  },
};
</script>
<style scoped lang="scss">
.mapBox {
  width: 100%;
  height: 100%;
  .mapBtn {
    bottom: 20px;
    right: 20px;
    z-index: 9999999999999999;
  }
}
</style>
